<template>
  <el-dialog
    :visible.sync="dialogVisible"
    width="500px"
    :before-close="handleClose"
  >
    <div class="content">
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="70px"
      >
        <div class="title">忘记密码</div>
        <el-form-item prop="email">
          <el-input v-model="ruleForm.email" placeholder="输入邮箱"></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            v-model="ruleForm.password"
            placeholder="设置密码"
            show-password
          >
          </el-input>
        </el-form-item>
        <el-form-item prop="repassword">
          <el-input
            v-model="ruleForm.repassword"
            placeholder="确认密码"
            show-password
          >
          </el-input>
        </el-form-item>
        <el-form-item label="" prop="code">
          <el-input
            v-model="ruleForm.code"
            placeholder="请输入验证码"
            maxlength="6"
          >
          </el-input>
          <sendCode :email="ruleForm.email" event="forget"></sendCode>
        </el-form-item>
        <div class="btn pointer" @click="onSubmit">确认找回</div>
      </el-form>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: "loginView",
  data() {
    return {
      dialogVisible: false,
      ruleForm: {
        email: "",
        password: "",
        repassword: "",
        code: "",
      },
      rules: {
        email: [{ message: "请输入手机号码", trigger: "blur" }],
        password: [{ message: "请设置密码", trigger: "blur" }],
        repassword: [{ message: "请确认密码", trigger: "blur" }],
        code: [{ message: "请输入验证码", trigger: "blur" }],
      },
      img: require("@/assets/login.png"),
      checked: true,
    };
  },
  components: {
    sendCode: () => import("@/components/popup/sendCode.vue"),
  },
  methods: {
    open() {
      this.dialogVisible = true;
    },
    handleClose() {
      this.dialogVisible = false;
      this.$emit("update:visible", false);
    },
    handleLogin() {
      this.handleClose();
      this.$emit("handleLogin", true);
    },
    onSubmit() {
      if (this.ruleForm.email === "") {
        this.$message.error("请输入邮箱");
        return false;
      }
      if (this.ruleForm.password === "" || this.ruleForm.repassword === "") {
        this.$message.error("请设置密码/确认密码");
        return false;
      }
      if (this.ruleForm.password !== this.ruleForm.repassword) {
        this.$message.error("两次密码输入不一致");
        return false;
      }
      if (this.ruleForm.code === "") {
        this.$message.error("请输入验证码");
        return false;
      }
      this.$post("/user/forget", this.ruleForm).then((res) => {
        if (res.code == 1) {
          this.$message.success(res.msg);
          this.handleClose();
        }
      });
    },
  },
};
</script>

<style scoped lang="scss">
.content {
  padding: 80px;
  border-radius: 10px;
  background: #fff;
}
:deep .el-form-item__content {
  margin-left: 0 !important;
}
.title {
  font-size: 30px;
  color: #333;
  margin-bottom: 30px;
}
.el-form {
  width: 100%;
  .btn {
    text-align: center;
    color: #fff;
    background: #917bbd;
    border-radius: 8px;
    line-height: 60px;
    margin-bottom: 20px;
    font-size: 26px;
  }
  .bottom {
    text-align: right;
    color: #a0a0a0;
    font-size: 18px;
  }
}
.checkBox {
  margin-top: 20px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-wrap: wrap;
  span {
    color: #917bbd;
  }

  :deep .el-checkbox__input.is-checked .el-checkbox__inner,
  :deep .el-checkbox__input.is-indeterminate .el-checkbox__inner {
    background-color: #917bbd;
    border-color: #917bbd;
  }
}
@media screen and (max-width: 768px) {
  :deep .el-dialog {
    width: 90% !important;
  }
}
</style>
